<template>
    <div class="index">
        <div class="index-carousel">
            <el-carousel trigger="click" height="375px" style="margin-top: 8px">
                <el-carousel-item v-for="(item,index) in images" :key="index">
                    <img :src="item.url" alt="无图片" style="width: 100%;height: 375px;"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--新闻中心、通知公告-->
        <div class="index-news">
            <div class="col-md-6">
                <div class="col-md-12">
                    <div class="home-title-span">
                        <span>新闻中心</span>
                        <a>更多>></a>
                    </div>
                    <ul class="home-ul">
                        <li v-for="newsData in news">
                            <a target="_blank">{{newsData.dataTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-md-12">
                    <div class="home-title-span">
                        <span>通知公告</span>
                        <a>更多>></a>
                    </div>
                    <ul class="home-ul">
                        <li v-for="noticeData in notice">
                            <a target="_blank">{{noticeData.dataTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-md-12">
                    <div class="home-title-span">
                        <span>政策法规</span>
                        <a>更多>></a>
                    </div>
                    <ul class="home-ul">
                        <li v-for="policyData in policy">
                            <a target="_blank">{{policyData.dataTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-6">
                <div class="col-md-12">
                    <div class="home-title-span">
                        <span>办事指南</span>
                        <a>更多>></a>
                    </div>
                    <ul class="home-ul">
                        <li v-for="guideData in guide">
                            <a target="_blank">{{guideData.dataTitle}}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--医疗服务-->
        <div class="index-other">
            <div class="home-health-icon-body">
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
                <div class="home-medical-text-div">
                    <img src="../../assets/images/u114.svg" alt="ex">
                    <div class="home-medical-text">
                        <p class="home-medical-head-title">医疗服务</p>
                        <span class="home-medical-head-intro">Medical Service</span>
                    </div>
                    <img src="../../assets/images/u114.svg" alt="ex">
                </div>
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
            </div>
            <!--医疗服务内容-->
            <!--河北名院-->
            <div class="home-medical-content-body">
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>河北名院</span>
                    </div>
                    <!--循环： home-medical-hospital-content-->
                    <div class="home-medical-hospital-content" v-for="hospitalData in hospital">
                        <div class="home-medical-content-img">
                            <img :src="hospitalData.filePath">
                        </div>
                        <div class="home-medical-content">
                            <a>
                                <span class="home-medical-content-name">{{hospitalData.hospitalName}}</span>
                                <p class="home-medical-content-intro">{{hospitalData.hospitalBriefIntroduce}}</p>
                            </a>
                        </div>
                    </div>
                    <!--循环结束-->
                    <div class="home-medical-more">
                        <a class="home-content-a">更多>></a>
                    </div>
                </div>
                <!--特色专科-->
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>特色专科</span>
                    </div>
                    <div class="home-medical-hospital-content" v-for="specialtyData in specialty">
                        <div class=" home-medical-content-img">
                            <img src="../../assets/images/no-image.jpg">
                        </div>
                        <div class="home-medical-content">
                            <a>
                                <p class="home-medical-content-name">{{specialtyData.specialtyName}}</p>
                                <p class="home-medical-content-intro">所在机构：{{specialtyData.hospitalName}}</p>
                                <p class="home-medical-content-intro">
                                    所在地址：{{specialtyData.specialtyAddressPro}}{{specialtyData.specialtyAddressCity}}</p>
                            </a>
                        </div>
                    </div>
                    <div class="home-medical-more">
                        <a class="home-content-a">更多>></a>
                    </div>
                </div>
                <!--河北名医-->
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>河北名医</span>
                    </div>
                    <div class="home-medical-hospital-content" v-for="doctorData in doctor">
                        <div class="home-medical-content-img-doctor">
                            <img :src="doctorData.filePath">
                        </div>
                        <div class="home-medical-content-doctor">
                            <a>
                                <p class="home-medical-content-name">{{doctorData.chineseMedicineName}}</p>
                                <p class="home-medical-content-intro">主要诊治：{{doctorData.mainVisit}}</p>
                                <p class="home-medical-content-intro">出诊地点：{{doctorData.hospitalName}}</p>
                            </a>
                        </div>
                    </div>
                    <div class="home-medical-more">
                        <a class="home-content-a">更多>></a>
                    </div>
                </div>
            </div>
        </div>
        <!--产业发展-->
        <div class="index-other">
            <div class="home-development-body">
                <div class="home-health-icon-body">
                    <div class="home-icon">
                        <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                    </div>
                    <div class="home-develop-text-div">
                        <img src="../../assets/images/u114.svg" alt="ex">
                        <div class="home-develop-text">
                            <p class="home-medical-head-title">产业发展</p>
                            <span class="home-medical-head-intro">Industrial Development</span>
                        </div>
                        <img src="../../assets/images/u114.svg" alt="ex">
                    </div>
                    <div class="home-icon">
                        <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                    </div>
                </div>
                <!--产业内容-->
                <div class="home-development-content-body">
                    <!--循环：home-development-content-->
                    <div class="home-development-content" v-for="developData in developMap">
                        <span class="home-development-num">{{developData['orgNum']}}</span>
                        <p class="home-develop-name">{{developData['orgType']}}</p>
                    </div>
                    <!--循环结束-->
                </div>
            </div>
        </div>
        <!--科研成果-->
        <div class="index-others">
            <div class="col-md-12">
                <div class="home-title-span">
                    <span>科研成果</span>
                    <a class="index-others-more">更多>></a>
                </div>
            </div>
            <div class="col-md-12 home-content-list">
                <div class="home-content-list-title">
                    <p class="home-list-4">项目名称</p>
                    <p class="home-list-3">研究成果</p>
                    <p class="home-list-3">来源机构</p>
                    <p class="home-list-2">发布日期</p>
                </div>
                <!--循环：home-ul-line-->
                <ul class="home-ul-line" v-for="industrialDevelopSciAchiData in industrialDevelopSciAchiDOList">
                    <a class="home-ul-a">
                        <li class=" home-ul-li-style">
                            <div class="row home-ul-li-content">
                                <span class="home-list-4 ">{{industrialDevelopSciAchiData.projectName}}</span>
                                <span class="home-list-3 ">{{industrialDevelopSciAchiData.industrialDevelopName}}</span>
                                <span class="home-list-3 ">{{industrialDevelopSciAchiData.orgName}}</span>
                                <span class="home-list-2 ">{{industrialDevelopSciAchiData.itemupdateat | fomateDate}}</span>
                            </div>
                        </li>
                    </a>
                </ul>
                <!--循环结束-->
            </div>
        </div>
        <!--合作交流-->
        <div class="index-others">
            <div class="col-md-12">
                <div class="home-title-span">
                    <span>合作交流</span>
                    <a>更多>></a>
                </div>
            </div>
            <div class="col-md-12 home-content-list">
                <div class="home-content-list-title">
                    <p class="home-list-4">合作信息</p>
                    <p class="home-list-3">预期合作机构</p>
                    <p class="home-list-3">来源机构</p>
                    <p class="home-list-2">发布日期</p>
                </div>
                <!--循环：home-ul-line-->
                <ul class="home-ul-line" v-for="industrialDevelopCooExcData in industrialDevelopCooExcDOList">
                    <a class="home-ul-a">
                        <li class=" home-ul-li-style">
                            <div class="row home-ul-li-content">
                                <span class="home-list-4 ">{{industrialDevelopCooExcData.cooperationExchangeName}}</span>
                                <span class="home-list-3 ">{{industrialDevelopCooExcData.cooperativeOrg}}</span>
                                <span class="home-list-3 ">{{industrialDevelopCooExcData.orgName}}</span>
                                <span class="home-list-2 ">{{industrialDevelopCooExcData.itemupdateat | fomateDate}}</span>
                            </div>
                        </li>
                    </a>
                </ul>
                <!--循环结束-->
            </div>
        </div>
        <!--人才招募-->
        <div class="index-others">
            <div class="col-md-12">
                <div class="home-title-span">
                    <span>人才招募</span>
                    <a>更多>></a>
                </div>
            </div>
            <div class="col-md-12 home-content-list">
                <div class="home-content-list-title">
                    <p class="home-list-4">招聘职位</p>
                    <p class="home-list-3">发布机构</p>
                    <p class="home-list-3">工作地点</p>
                    <p class="home-list-2">发布日期</p>
                </div>
                <!--循环：home-ul-line-->
                <ul class="home-ul-line" v-for="industrialDevelopTalRecData in industrialDevelopTalRecDOList">
                    <a class="home-ul-a">
                        <li class=" home-ul-li-style">
                            <div class="row home-ul-li-content">
                                <span class="home-list-4 ">{{industrialDevelopTalRecData.recruitmenTtitle}}</span>
                                <span class="home-list-3 ">{{industrialDevelopTalRecData.orgName}}</span>
                                <span class="home-list-3 ">{{industrialDevelopTalRecData.workplace}}</span>
                                <span class="home-list-2 ">{{industrialDevelopTalRecData.itemupdateat | fomateDate}}</span>
                            </div>
                        </li>
                    </a>
                </ul>
                <!--循环结束-->
            </div>
        </div>
        <!--中医文化-->
        <div class="index-other">
            <div class="home-health-icon-body">
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
                <div class="home-culture-text-div">
                    <img src="../../assets/images/u114.svg" alt="ex">
                    <div class="home-culture-text">
                        <p class="home-medical-head-title">中医文化</p>
                        <span class="home-medical-head-intro">Traditional Chinese medicine culture</span>
                    </div>
                    <img src="../../assets/images/u114.svg" alt="ex">
                </div>
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
            </div>
            <!--中医文化内容-->
            <!--历代名家-->
            <div class="home-culture-content-body">
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>历代名家</span>
                    </div>
                    <div class="home-culture-content">
                        <div class="home-culture-content-list">
                            <!--空内容-->
                        </div>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>中医流派</span>
                    </div>
                    <div class="home-culture-content">
                        <div class="home-culture-content-list">
                            <!--空内容-->
                        </div>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>健康旅游</span>
                    </div>
                    <div class="home-culture-content">
                        <div class="home-culture-content-list">
                            <!--空内容-->
                        </div>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--养生保健-->
        <div class="index-other">
            <div class="home-health-icon-body">
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
                <div class="home-health-text-div">
                    <img src="../../assets/images/u114.svg" alt="ex">
                    <div class="home-health-text">
                        <p class="home-medical-head-title">养生保健</p>
                        <span class="home-medical-head-intro">Health care</span>
                    </div>
                    <img src="../../assets/images/u114.svg" alt="ex">
                </div>
                <div class="home-icon">
                    <img src="../../assets/images/u115.svg" alt="ex" class="home-health-line">
                </div>
            </div>
            <!--中医文化内容-->
            <!--历代名家-->
            <div class="home-culture-content-body">
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>科普知识</span>
                    </div>
                    <div class="home-culture-content">
                        <ul class="home-ul-culture">
                            <!--空内容-->
                        </ul>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>历史名方</span>
                    </div>
                    <div class="home-culture-content">
                        <ul class="home-ul-culture">
                            <!--空内容-->
                        </ul>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>
                <div class="home-medical-content-item">
                    <div class="home-medical-content-title">
                        <span>国医话健康</span>
                    </div>
                    <div class="home-culture-content">
                        <ul class="home-ul-culture">
                            <!--空内容-->
                        </ul>
                        <div class="home-culture-more">
                            <a class="home-content-a">更多>></a>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'Index',
        data() {
            return {
                images: [
                    {url: require('../../assets/images/no-image.jpg')},
                    {url: require('../../assets/images/no-image.jpg')},
                    {url: require('../../assets/images/no-image.jpg')},
                    {url: require('../../assets/images/no-image.jpg')},
                    {url: require('../../assets/images/no-image.jpg')},
                ],
                news: [],
                notice: [],
                policy: [],
                guide: [],
                hospital: [],
                specialty: [],
                doctor: [],
                developMap: '',
                industrialDevelopSciAchiDOList:[],
                industrialDevelopCooExcDOList:[],
                industrialDevelopTalRecDOList:[],
            };
        },
        mounted() {
            this.axios.post('http://localhost:9000/index/selectIndexData').then(res => {
                this.news = res.data["news"];
                this.notice = res.data["notice"];
                this.policy = res.data["policy"];
                this.guide = res.data["guide"]

                this.hospital = res.data["hospital"]
                this.specialty = res.data["specialty"]
                this.doctor = res.data["doctor"]

                this.developMap = new Map();
                this.developMap=res.data["developTecSerOrgDOList"];

                this.industrialDevelopSciAchiDOList=res.data["industrialDevelopSciAchiDOList"];
                this.industrialDevelopCooExcDOList=res.data["industrialDevelopCooExcDOList"];
                this.industrialDevelopTalRecDOList=res.data["industrialDevelopTalRecDOList"];

                console.log(this.news);
                console.log(this.notice);
                console.log(this.policy);
                console.log(this.hospital);
                console.log(this.specialty);
                console.log(this.doctor);
                console.log(this.developMap);
                console.log("科研成果",this.industrialDevelopSciAchiDOList);
                console.log("合作交流",this.industrialDevelopCooExcDOList);
                console.log("人才招聘",this.industrialDevelopTalRecDOList);


            })
        }

    }
</script>
<style>
    .index {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        margin-left: 16.666667%;
        max-width: 66.666667%;
    }

    /*轮播图*/
    .index-carousel {
        border: 1px solid #ccc;
        margin: 0px 10px 10px 10px;
    }

    /*新闻、通知、公告*/
    .index-news {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 15px;
        margin-left: 15px;
        box-sizing: border-box;
    }

    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        box-sizing: border-box;
    }

    .home-title-span {
        border-bottom: 2px solid #775637;
        height: auto;
        padding: 5px 0px;
        box-sizing: border-box;
    }

    .home-title-span > span {
        background: #775637;
        padding: 8px 20px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: 14px;
        color: #FFFFFF;
    }

    .home-title-span > a {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        text-decoration: none;
        color: #CC0001;
        font-size: 13px;
        padding: 0;
        margin: 0;
        position: absolute;
        right: 16px;
        top: 14px;
        box-sizing: border-box;
    }

    .home-title-span > a:hover {
        text-decoration: none;
        color: #775637;
    }

    .home-ul {
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 0px;
        padding: 0;
    }

    .home-ul li {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #333333;
        line-height: 1.5rem;
        list-style-image: url("../../assets/images/u47.svg");

    }

    .home-ul li a {
        color: #333333;
        width: 354px;
        text-decoration: none;
        float: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }


    /*医疗服务*/
    /*医疗服务标题和菱形div*/
    .index-other {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        box-sizing: border-box;
    }

    .home-health-icon-body {
        width: 100%;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
        box-sizing: border-box;
    }

    .home-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .home-health-line {
        min-height: 5px;
        width: 100%;
        box-sizing: border-box;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

    .home-medical-text-div {
        min-width: 165px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*医疗服务标题*/
    .home-medical-text {
        display: inline-block;
        min-width: 125px;
        text-align: center;
    }

    .home-medical-content-body {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .home-medical-content-item {
        width: 290px;
    }

    .home-medical-head {
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .home-medical-head-title {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        text-align: center;
        color: #D9001B;
        padding: 0;
        margin: 0;
    }

    .home-medical-head-intro {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
    }

    .home-medical-content-intro {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 13px;
        text-align: center;
    }

    .home-medical-content-title {
        background: url("../../assets/images/u133.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 10px 40px;
        text-align: center;
        padding: 8px 0px;
        height: auto;
    }

    .home-medical-content-title span {
        font-size: 18px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
    }

    .home-medical-content {
        width: 160px;
    }

    .home-medical-hospital-content {
        display: flex;
        flex-flow: row wrap;
        margin-top: 10px;
        height: 90px;
        justify-content: center;
    }

    .home-medical-content-img {
        width: 115px;
        display: flex;
        box-sizing: border-box;
    }

    .home-medical-content-img img {
        margin: 0;
        padding: 0;
        width: 90px;
        height: 90px;
        border: 1px solid #ccc;
    }

    .home-medical-content a {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 14px;
        color: #775637;
        padding: 0;
        margin-bottom: 3px;
        text-decoration: none;
    }

    .home-medical-content a p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .home-medical-content a:hover {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 13px;
        color: #775637;
        padding: 0;
        margin-bottom: 3px;
        text-decoration: none;
    }

    .home-medical-content-name {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 13px;
        color: #775637;
        margin: 0 10px;
        padding: 0;
        margin-bottom: 3px;
        text-decoration: none;
    }

    .home-medical-content-intro {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 13px;
        color: #333333;
        margin: 0 10px;
        padding: 0;
        margin-bottom: 3px;
        text-align: left;
    }

    .home-content-a {
        margin-top: 10px;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        text-decoration: none;
        color: #CC0001;
        font-size: 13px;
        float: right;
        margin-right: 10px;
    }

    .home-content-a:hover {
        color: #775637;
        text-decoration: none;
    }

    .home-medical-content-img-doctor {
        display: flex;
    }

    .home-medical-content-img-doctor img {
        padding: 0;
        max-height: 90px;
        max-width: 80px;
        border: 1px solid #ccc;
    }

    .home-medical-content-doctor {
        width: 195px;
    }

    .home-medical-content-doctor a {
        text-decoration: none;
    }

    /*产业发展*/
    /*产业发展标题和菱形div*/
    .home-develop-text-div {
        min-width: 205px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*产业发展标题*/
    .home-develop-text {
        display: inline-block;
        min-width: 165px;
        text-align: center;
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
    }

    .home-development-body {
        margin-top: 20px;
        width: 100%;
    }

    .home-development-content-body {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }

    .home-development-content {
        width: 120px;
        margin-top: 20px;
        text-align: center;
    }

    .home-development-num {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 28px;
        color: #CC0001;
    }

    .home-develop-name {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        font-size: 13px;
        margin-top: 10px;
        color: #333333;
    }

    /*科研、人才*/
    .index-others {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: 15px;
        margin-left: 15px;
        box-sizing: border-box;
    }

    .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .home-content-list-title {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-left: 20px;
    }

    .home-list-4 {
        flex: 4;
    }

    .home-list-3 {
        flex: 3;
        text-align: center;
    }

    .home-list-2 {
        text-align: center;
        flex: 2;
    }

    .home-ul-line {
        width: 100%;
        margin-top: 8px;
        padding-right: 0px;
        padding-left: 10px;
    }

    .home-ul-a, .home-ul-a:hover {
        text-decoration: none;
        color: #333333;
    }

    .home-ul-li-style {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #333333;
        list-style-image: url("../../assets/images/u47.svg");
        padding: 0;
    }

    .home-ul-li-style a:hover {
        text-decoration: none;
        color: #333333;
    }

    .home-ul-li-content {
        margin: 0;
        padding: 0;
        display: inline-flex;
        justify-content: center;
        width: 100%;
    }

    .home-ul-li-content span:first-child {
        padding-left: 15px;
        margin: 0;
        padding-right: 0;
    }

    .home-content-list p {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 13px;
        color: #775637;
        text-align: center;
        margin-top: 10px;
        margin-bottom: -8px;
    }

    /*中医文化*/
    /*中医文化标题和菱形div*/
    .home-culture-text-div {
        min-width: 310px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*中医文化标题*/
    .home-culture-text {
        display: inline-block;
        min-width: 270px;
        text-align: center;
    }

    .home-culture-content-body {
        margin-bottom: 30px;
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }

    .home-culture-content {
        display: flex;
        flex-flow: row wrap;
        margin-top: 10px;
        margin-left: 10px;
    }

    .home-culture-content-list {
        margin-left: 10px;
        width: 260px;
        height: 125px;
    }

    .home-culture-content-list a {
        text-decoration: none;
    }

    .home-culture-content-list a:hover {
        text-decoration: none;
    }

    .home-culture-content-fam img {
        display: block;
        width: 80px;
        height: 100px;
    }

    .home-culture-content-fam {
        display: inline-block;
        text-align: center;
    }

    .home-culture-content-fam a {
        text-decoration: none;
    }

    .home-culture-content-fam a:hover {
        color: #333333;
        text-decoration: none;
    }

    .home-culture-content-fam span {
        color: #333333;
        display: block;
        font-size: 13px;
    }

    .home-culture-more {
        /*position: absolute;*/
        /*bottom: 5px;*/
        width: 260px;
    }

    .home-culture-type-list {
        margin: 0;
        padding: 0;
    }

    .home-culture-type-list a {
        text-decoration: none;
    }

    .home-culture-type-list a:hover {
        text-decoration: none;
    }

    .home-culture-type-name {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #775637;
    }

    .home-culture-type-intro {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #333333;
    }

    .home-culture-travel-list {
        margin-left: 10px;
        width: 260px;
        height: 125px;
    }

    .home-culture-travel-item {
        display: inline-block;
    }

    .home-culture-travel-list img {
        width: 80px;
        height: 55px;
    }

    /*养身保健*/
    .home-health-content-list {
        margin-left: 10px;
        width: 260px;
    }

    /*养身保健标题和菱形div*/
    .home-health-text-div {
        min-width: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*养身保健标题*/
    .home-health-text {
        display: inline-block;
        min-width: 120px;
        text-align: center;
    }

    /*养身保健线*/
    .home-health-line {
        min-height: 5px;
        width: 100%;
    }

    /*养身保健线div*/
    .home-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*养身保健icon主体*/
    .home-health-icon-body {
        width: 100%;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
    }

    .home-ul-culture {
        padding: 0;
        margin: 0 8px;
        width: 260px;
        height: 125px;
    }

    .home-ul-culture li {
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 13px;
        color: #333333;
        line-height: 1.5rem;
        list-style-image: url("../../assets/images/u47.svg");
    }

    .home-ul-culture li a {
        color: #333333;
        text-decoration: none;
    }
</style>
